<template>
    <div class="login-page op-fullscreen">
    <VanNavBar title="请登录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <VanForm class="login-page__form" @submit="onSubmit">
      <VanCellGroup inset>
        <VanField
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <VanField
          v-model="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </VanCellGroup>
      <div style="margin: 16px">
        <VanButton round block type="primary" native-type="submit">提交</VanButton>
      </div>
    </VanForm>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { ILoginInfo } from '@/types'
import { useAuth } from '@/use/useAuth';

const username = ref('');
const password = ref('');
const  { login } = useAuth();

const onSubmit =  async (data: ILoginInfo) => {
    onClickLeft();
    await login(data);
    onClickLeft();
}

const onClickLeft = () => {
  history.back();
}

</script>
<style scoped lang="scss">
.login-page {
  .login-page__form {
    margin-top: 100px;
  }
}
</style>